<template>
  <el-dialog
    v-if="dialogOption.show"
    :fullscreen="dialogOption.fullscreen"
    :width="dialogOption.width || '40%'"
    :top="dialogOption.top"
    :append-to-body="dialogOption.appendToBody"
    :close-on-click-modal="dialogOption.closeOnClickModal || false"
    destroy-on-close
    :show-close="false"
    :visible.sync="dialogOption.show"
  >
    <template #title>
      <span>
        <dialog-title
          :icon="dialogOption.title && dialogOption.title.icon"
          :title="dialogOption.title.title"
          :subtitle="dialogOption.title.subtitle"
          :is-close="close"
        />
      </span>
    </template>
    <div class="dialog-content" :style="{ maxHeight: dialogOption.height ? dialogOption.height : height + 'px' }">
      <slot name="content" />
    </div>
    <span
      v-if="!dialogOption.hiddenFooter"
      class="dialog-footer"
    >
<!--      <el-button-->
<!--        size="mini"-->
<!--        @click="close"-->
<!--        plain-->
<!--        style="width: 120px"-->
<!--      >取 消</el-button>-->
      <div class="button cancel-button" @click="close">取消</div>
      <div class="button confirm-button" @click="submit">确 定</div>
<!--      <el-button-->
<!--        size="mini"-->
<!--        type="primary"-->
<!--        @click="submit"-->
<!--        style="width: 120px"-->
<!--      >确 定</el-button>-->
    </span>
  </el-dialog>

</template>

<script>
import DialogTitle from './title'
export default {
  name: 'Index',
  components: {
    DialogTitle
  },
  props: {
    dialog: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      centerDialogVisible: true,
      height: null
    }
  },
  computed: {
    dialogOption: {
      get() {
        return this.dialog
      },
      set(val) {
        this.$emit('update:dialog', val)
      }
    }
  },
  mounted() {
    this.height = document.body.offsetHeight -
      (this.dialogOption.hiddenFooter
        ? this.dialogOption.fullscreen ? 110 : 250
        : this.dialogOption.fullscreen ? 113 : 350)
    window.addEventListener('resize', (e) => {
      this.height = document.body.offsetHeight -
        (this.dialogOption.hiddenFooter
          ? this.dialogOption.fullscreen
            ? 63 : 250 : this.dialogOption.fullscreen
            ? 113 : 350)
    })
  },
  methods: {
    close() {
      this.$emit('onClose')
      this.dialogOption.show = false
    },
    submit() {
      this.$emit('onSubmit', status => {
        if (status) this.close()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
}
.button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 10px 15px;
  font-size: 12px;
  border-radius: 4px;
  width: 120px;
  margin-right: 10px;
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.04);
}
.cancel-button {
  color: $base-color-default;
  border: 1px solid $base-color-default;
}
.confirm-button {
  background: linear-gradient( 90deg, #3766FF 0%, #04FFE0 100%);
  color: #FFFFFF;
}
::v-deep .el-dialog__header {
  padding: 10px;
  border-bottom: 1px solid rgba(123,97,255,0.1);
}
::v-deep .el-dialog__body {
  padding: 10px 0 0;
}
::v-deep .el-dialog__footer {
  padding: 0;
  text-align: right;
}
::v-deep .dialog-footer {
  text-align: center;
  padding: 10px;
  display: block;
  border-top: 1px solid rgba(123,97,255,0.1);
}
::v-deep .el-dialog {
  background: #1D2129;
  border-radius: 8px;
}
</style>
